// 选中项间距
export const TAG_SPACE_SIZE = 8;

// 选中项内边距
export const TAG_PADDING = 8;

// 选中项关闭按钮宽度
export const TAG_CLOSE_BUTTON_WIDTH = 16;

// 单个字符宽度，此处采用等宽字符
export const CHARACTER_WIDTH = 10;

// 选中项最小宽度
export const MIN_TAG_WIDTH = TAG_CLOSE_BUTTON_WIDTH + TAG_PADDING * 2 + CHARACTER_WIDTH;

// 容器内边距
export const TRIGGER_WRAPPER_PADDING = 4 + 32;

// 计算moreTag的最大的宽度
function getMoreTagCountWidth(moreTagCount): number {
  return (`${moreTagCount}`.length + 1) * CHARACTER_WIDTH + TAG_PADDING * 2; // +号和数字
}

interface CalcMaxTagProps {
  selectionNode: any[]; // 选项节点
  selectionWrapperWidth: number; // 容器宽度计算方法
  selectedValue?: any[]; // 选中项
}

/**
 * 计算获得显示的选项数量
 */
export function calcMaxTag(props: CalcMaxTagProps): number {
  const { selectionNode, selectionWrapperWidth, selectedValue } = props;
  const listLength = selectionNode?.length || 0;

  let restWidth = selectionWrapperWidth; // 容器剩余宽度
  let maxTagCount = 0; // 能放下的选项数量

  // 计算能放下几个
  for (let i = 0; i < listLength; i++) {
    const currentClientWidth = Number(window.getComputedStyle(selectionNode[i]).getPropertyValue('width').slice(0, -2));
    if (!currentClientWidth) {
      break;
    }
    const space = TAG_SPACE_SIZE;
    if (restWidth - currentClientWidth - space > 0) {
      maxTagCount++;
      restWidth -= currentClientWidth + space;
    } else {
      break;
    }
  }

  // 能放下所有选项
  if (maxTagCount === listLength) {
    return listLength;
  }

  // moreTag最大宽度,使用实际选中项的数量来计算
  const maxMoreTagWidth = getMoreTagCountWidth(selectedValue.length);

  // 如果剩余宽度不能放下moreTag，数量减1
  if (restWidth - maxMoreTagWidth - TAG_SPACE_SIZE < 0) {
    maxTagCount--;
  }

  // 数量如果大于0个，直接返回
  if (maxTagCount > 0) {
    return maxTagCount;
  }

  // 如果能放下: tag最小宽度+moreTag宽度+间距，显示1个选项
  if (selectionWrapperWidth - MIN_TAG_WIDTH - maxMoreTagWidth - TAG_SPACE_SIZE > 0) {
    return 1;
  }

  // 只显示moreTag
  return 0;
}
